<template>
	<view class="ccard">
		<view class="" @click="goto">
			<view class="ccard-item flex" >
				<text class="title">订单号：</text>
				<text>{{item.ocsOrderNo}}</text>
				<image v-if="footer" class="cicon"
				 src="/static/img/orderNo.png" @click.stop="getClipboardInfo" :data-orderNo="item.ocsOrderNo" ></image>
			</view>
			<view class="ccard-item text-center" v-if="item.pickupCity && item.deliveryCity">
				<text class="title-lg">{{item.pickupCity}}</text>
				<image src="/static/img/arrow-to.png" class="cusicon-Arrow" mode=""></image>
				<text class="title-lg">{{item.deliveryCity}}</text>
			</view>
			<view class="ccard-item">
				<text class="title">货物信息：</text>
				<text>托盘数量：{{item.plQty}}托，</text>
				<text>纸箱数量：{{item.csQty}}箱</text>
			</view>
			<view class="ccard-item">
				<text class="title">下单时间：</text>
				<text>{{item.orderDateTime}}</text>
			</view>
		</view>

		<view v-if="footer" class="ccard-footer flex justify-end">
			<button v-if="newStatus==1" class="cu-btn round line-grey margin-right" :data-id="item.id" @click="cancle">取消</button>
			<button class="cu-btn round line-blue" @click="reminder">催单</button>
		</view>
	</view>

</template>

<script>
	import {showToast,showModal} from '@/utils/util.js';
	export default {
		props: {
			item:Object,
			status:{
				type:[String,Number]
			},
			footer:{
				type:Boolean,
				default:true
			},
			token:String
		},
		inject:['Pstatus','refresh'],
		
		data() {
			return {
				newStatus:this.Pstatus.status,
			};
		},
		watch:{
			Pstatus:{
				handler(val,oldval){
					this.newStatus = val.status;
				},
				deep:true
			}
		},
		onShow() {
		},
		methods: {
			goto() {
				this.$emit('goto',this.item)
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
			cancle(e){
				console.log('Pstatus',this.Pstatus.status)
				const {id} = e.currentTarget.dataset;
				let params = {
					token:this.token,
					orderId:id
				}
				// this.refresh({type:'cancle'});
				// return;
				showModal({
					title:"提示",
					content:'确定取消订单吗？',
					showCancel:true,
					confirmColor:'#ff4d4f',
					 success:  (res)=> {
					        if (res.confirm) {
					           this.$store.dispatch('order/delete',params).then((v)=>{
									this.refresh({type:'cancle'});
					           })
					        } else if (res.cancel) {
					            // console.log('用户点击取消');
					        }
					    }
				})
			
			},
			reminder(){
				showToast({title:'催单成功！'})
			},
			getClipboardInfo(e){
				const {orderno} = e.currentTarget.dataset;
				console.log('e====orderno:',orderno);
				uni.setClipboardData({
				    data: orderno,
				    success: function () {
				        console.log('success');
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ccard{
		border-radius: 15px;
		background-color: #fff;
		margin-bottom: 10px;
		padding: 10px;
		&-item{
			margin-bottom: 8px;
		}
		.title{
			color: #9a9999;
			&-lg{
				font-size: 20px;
			}
		}
		.cicon{
			width: 20px;
			height: 22px;
			position: relative;
			top: -5px;
		}
		.ccard-footer{
			border-top: 1px solid #e1dede;
			padding-top: 10px;
		}
		.cusicon-Arrow{
			text-align: center;
			width: 80rpx;
			height: 20px;
		}
	}
</style>
